<template>
    <div class="h" style="margin: 0px; padding: 0px">
        <el-row :gutter="24" class="mainContainer">
            <el-col :span="4" class="left" >
                <PlayerInfo :p-info="playerInfo[0]" class="playerInfoShow"></PlayerInfo>
                <PlayerInfo :p-info="playerInfo[1]" class="playerInfoShow"></PlayerInfo>
            </el-col>
            <el-col :span="16" class="center">
                <div class="map">
                    <el-row v-for="(row,index) in gameMap" :key="index+gameKey * 2" :gutter="mapWidth" style="height: 50px; margin: 0px; padding: 0px;">
                        <el-col v-for="(col, iindex) in row" :span="1" style="width: 50px;margin: 0px; padding: 0px;">
                            <el-image :src="draw(gameMap[index][iindex])" class="gameItem" >

                            </el-image>
                        </el-col>
                    </el-row>
                </div>
                <div>
                    <el-image :src="STAR" class="star"></el-image>
                </div>
            </el-col>
            <el-col :span="4" class="right">
                <PlayerInfo :p-info="playerInfo[2]" class="playerInfoShow"></PlayerInfo>
                <PlayerInfo :p-info="playerInfo[3]" class="playerInfoShow"></PlayerInfo>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import PlayerInfo from "@/components/playerInfo";
export default {
    name: "Index",
    data: function (){
        return{
            title:"index",
            gameMap:[],
            gameKey:1000,
            mapWidth:14,
            mapHeight:14,
            
            // 游戏玩家信息
            playerInfo:[],
            
            
            TREE:require("../../assets/gameImg/tree.png"),
            GRASS:require("../../assets/gameImg/grass.png"),
            FIRE:require("../../assets/gameImg/fire.png"),
            SWEET:require("../../assets/gameImg/sweet.png"),
            GAMEWALL:require("../../assets/gameImg/wall.png"),
            STAR:require("../../assets/gameImg/star.png"),
            mNULL:require("../../assets/gameImg/null.png"),
            
        }
    },
    created() {
        console.log("ok")
        this.gameInit();
    },
    computed:{
    
    },
    components:{
        PlayerInfo,
    },
    methods:{
        gameInit(){
            document.body.onselectstart = function (){
                return false;
            }
            this.gameMap = this.ramdomMap(this.mapWidth,this.mapHeight);
            this.addWall();
            this.creatPlayerInfo();
            console.log(this.gameMap);
            console.log(this.playerInfo)
            
        },
        // 随机生成地图
        ramdomMap(width, height){
            let map = new Array();
            for(let i = 0; i < height; i++){
                let tem = new Array();
                for(let j = 0; j < width; j++){
                    let t = Math.random();
                    //   console.log(t)
                    if(t <= 0.2){
                        tem.push("tree");
                    }else if(t <= 0.3){
                        tem.push("grass");
                    }else if(t <= 0.4){
                        tem.push("fire");
                    }else if(t <= 0.6){
                        tem.push("sweet");
                    }else if(t <= 0.8){
                        tem.push("star");
                    }
                    else{
                        tem.push("null");
                    }
                }
                map.push(tem)
            }
            console.log(map)
            return map;
        },
        // 添加围墙
        addWall(){
            let width = this.mapWidth;
            let height = this.mapHeight;
            let first = new Array();
            let map =this.gameMap;
            for(let i = 0; i < height; i++){
                first.push("wall");
                this.gameMap[i].unshift("wall")
                this.gameMap[i].push("wall")
            }
            first.push("wall");
            first.push("wall");
            this.gameMap.unshift(first);
            this.gameMap.push(first)
            this.gameKey = this.gameKey + 1;
            // console.log("gamemap:"+this.gameMap)
        },
        
        // 画地图
        draw(mtype){
            switch (mtype){
                case "tree":
                    return this.TREE;
                case "grass":
                    return this.GRASS;
                case "fire":
                    return this.FIRE;
                case "sweet":
                    return this.SWEET;
                case "wall":
                    return this.GAMEWALL;
                case "star":
                    return this.STAR;
                default:
                    return this.mNULL;
            }
        },
        
        // 模拟玩家信息
        creatPlayerInfo(){
            for (let i = 0; i < 4; i++) {
                let pinfo = {playerIndex:(i+1),playerName:"玩家"+(i+1),bomCount: 1,power:1,speed:1,score:1,stateKey:"state"+i}
                // console.log(pinfo)
                this.playerInfo.push(pinfo);
            }
        },
        
        
    }
    
    
}
</script>

<style scoped>

.mainContainer{

}
.star{
    animation: moveLeft 2s infinite;
   animation-duration: 2s;
}

@-webkit-keyframes moveLeft{
    50% {left: 10px}
    
}

.left{
    background: chartreuse;
    /*height: 100%;*/
    /*min-height: 900px;*/
    display:flex;
    flex-direction: column;
    justify-content:space-around;
    align-items:center;
    
    
    height: 100vh;
}
.center{
    background: antiquewhite;
    height:100vh;
    display: flex;
    justify-content:space-around;
    
    /*align-content: stretch;*/
}
.right{
    background: chartreuse;
    
    display:flex;
    flex-direction: column;
    /*justify-content:space-between;*/
    justify-content:space-around;
    align-items:center;
    
    height: 100vh;
}

.map{
    width: 800px;
    height: 800px;
    /*margin: 4% 17%;*/
    margin: 5% 0;
    
}

.el-col{
    margin: 0px !important;
    padding: 0px !important;
}
.el-row {
    margin: 0px !important;
    padding: 0px !important;
}
.el-image{
    margin: 0px !important;
    padding: 0px !important;
    display: block;
}
.gameItem{
    width: 50px;
    height: 50px;
}

.playerInfoShow{
    height: 400px;
    /*display:flex;*/
    justify-content:space-around;
    /*align-items:center;*/
    
}

</style>
